<!--二期 收藏的简历 -->
<template>
  <div class='collectResume'>
    <el-row>
      <el-col>
        <div class="grid-content bg-purple-dark purple-dar-title">
          查看记录
        </div>
        <div style="margin: 15px 0;"></div>
        <!-- 全选 -->
        <div class="grid-content bg-purple-dark purple-dar-title">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
          </el-checkbox>
          <el-button type="primary" class="saveBtnRecords" @click="insertResumeCollect">收藏简历</el-button>
        </div>
      </el-col>
    </el-row>
    <div style="margin: 15px 0;"></div>

    <!-- 复选框 -->
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="(record,index) in viewRecordsList.records" :label="record" :key="index" class="checkboxClass">
        <div class="recordslist">
          <div class="grid-content bg-purple portraitInfo">
            <div class="portrait" :class="{ 'portraitBox': record.sex == 1, 'portraitGirl': record.sex != 1 }">
              <img :src="record.photoAuditStatus ==1 ? record.photo:''" alt="">
            </div>
            <div class="info">
              <div class="toUrl">
                <a target="_blank"
                  :href="'/company/#/resumeManage?id='+ record.id+'&userId='+record.userId+'&path=talent'">
                  <p>{{record.name}}</p>
                  <p>{{record.sexText}} &nbsp; | &nbsp;{{record.age}} &nbsp;|
                    &nbsp;{{record.currentResidenceText || '暂无'}} &nbsp;| &nbsp;
                    {{record.educationText || '学历暂无'}}
                  </p>
                </a>
              </div>
              <p>
                {{ record.resumeEducationOutVo && record.resumeEducationOutVo[0].startTime.slice(0,7).replace('-','.') || '暂无'}}
                -
                {{record.resumeEducationOutVo && record.resumeEducationOutVo[0].endTime ? record.resumeEducationOutVo[0].endTime.slice(0,7) : '暂无'}}</span>
                {{record.resumeEducationOutVo && record.resumeEducationOutVo[0].school || ''}}
                {{record.resumeEducationOutVo && record.resumeEducationOutVo[0].major ||''}}
                {{record.educationText || '学历暂无'}}
              </p>
            </div>
          </div>
          <div class=" grid-content bg-purple course resumeWorkOutVo">
            <div v-for="(resumeWorkOutVo, index) in record.resumeWorkOutVo" :key="index" v-if="index<2">
              <p>
                {{resumeWorkOutVo && resumeWorkOutVo.startTime.slice(0,7).replace('-', '.') || '暂无'}}
                -
                {{resumeWorkOutVo && resumeWorkOutVo.endTime ? resumeWorkOutVo.endTime.slice(0,7).replace('-','.') :'至今'}}
              </p>
              <p> {{resumeWorkOutVo && resumeWorkOutVo.company}}

                {{resumeWorkOutVo && resumeWorkOutVo.job}}
              </p>
            </div>
            <div v-if="!record.resumeWorkOutVo" class="noWork">
              工作经历未填写
            </div>
          </div>
          <div class="grid-content bg-purple">
            <div class="grid-content bg-purple courseTime">
              <div>
                <p>查看时间： {{record.viewTime || '暂无'}}</p>
                <p>更新时间： {{record.refreshTime || '暂无'}}</p>
              </div>
            </div>
          </div>
        </div>
      </el-checkbox>
    </el-checkbox-group>
    <div class="pagination" style="text-align: center;margin-top: 30px;">
      <el-pagination background @size-change="handleSizeChange" :current-page="query.page"
        layout="prev, pager, next, jumper, sizes, total" :total="pageTotal" :page-sizes="[5, 10, 20, 50, 150, 300, 500]"
        :page-size="query.size" @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { resumeViewPage, insertResumeCollect } from '../../../api/talentPool';
export default {
  components: {},
  data () {
    return {
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: false,
      // 查询参数
      query: {
        page: 1,
        size: 10
      },
      // 分页总数
      pageTotal: 0,
      // 数据
      viewRecordsList: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 是否全选
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    // 选择数据 数组【】
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkedCities = value;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'page', val);
      this.getData();
    },
    // 获取分页条数大小
    handleSizeChange (val) {
      console.log(val)
      this.query.size = val
      this.getData();
    },
    // 二期： 请求 人才库 查看记录接口
    getData () {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      let quertFrom = new FormData()
      quertFrom.append('page', this.query.page)
      quertFrom.append('size', this.query.size)
      resumeViewPage(quertFrom).then((res) => {
        if (res.success) {
          this.viewRecordsList = res.data
          this.cities = res.data.records
          this.pageTotal = res.data.total
          loading.close()
        } else {
          loading.close()
        }
      }).catch(() => {
        loading.close()
      })
    },
    // 收藏简历
    insertResumeCollect () {
      if (this.checkedCities.length <= 0) {
        this.$message.error('请选择要收藏的简历')
        return false
      }
      let ids = []
      this.checkedCities.map((item) => {
        ids.push(item.id)
      })
      insertResumeCollect(ids).then((res) => {
        if (res.success) {
          this.$message.success('收藏成功')
        }
      })
      console.log(this.checkedCities, 'this.checkedCities')
    }

  },
  created () {
    this.getData()
  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.saveBtnRecords {
    margin-left: 20px;
}
.recordslist {
    display: flex;
    justify-content: space-between;
}
.purple-dar-title {
    height: 60px;
    line-height: 60px;
    padding-left: 35px;
    background: #ffffff;
}
.checkboxClass {
    display: block;
    background: #fff;
    margin: 20px 0px;
    padding: 30px 75px;
    display: flex;
    align-items: center;
}
.info {
    min-width: 320px;
}
.info p {
    width: 380px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resumeWorkOutVo p {
    width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portrait img {
    width: 80px;
    height: 100%;
    border-radius: 50%;
}
.portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 20px;
}
.portraitBox {
    background: url('../../../assets/img/logo.png') no-repeat;
    background-size: 100% 100%;
}
.portraitGirl {
    background: url('../../../assets/img/logoG.png') no-repeat;
    background-size: 100% 100%;
}

.portraitInfo {
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
}
.course {
    display: flex;
    height: 90px;
    width: 320px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.courseTime {
    height: 90px;
    display: flex;
    align-items: center;
}
.toUrl a {
    color: #606266;
}
.toUrl a:hover {
    color: #409eff;
}
.checkboxClass /deep/ .el-checkbox__label {
    width: 100%;
}
.checkboxClass /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
    cursor: text;
}
.pagination {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}
.noWork {
    color: #409eff;
    font-size: 18px;
}
</style>